<template>
  <el-dialog title="分配内转车"
             :visible.sync="dialogForm"
             width="1200px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             class="add-form"
             label-width="110px">
      <el-row>
        <el-col :span=" 12">
          <el-form-item label="车船号:">
            {{ form.transhipNo }}
          </el-form-item>
        </el-col>
        <el-col :span=" 12">
          <el-form-item label="入库方式:">
            {{ form.inWayName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车队"
                        prop="carTeam">
            <auto-search-dic v-model="form.carTeam"
                             @select="v=>form.carTeamCode=v"
                             @selectName="v=>form.carTeamName=v"
                             :name="form.carTeamName"
                             code="JOB_CDGS"></auto-search-dic>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内转车号"
                        prop="carNo">
            <auto-search-car-no v-model="form.carNo"
                                @select="v=>condition['search_LIKE_plateNumber']=v"></auto-search-car-no>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.baseVos"
                border
                stripe
                max-height="550">
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="cargoName"
                         label="品名"
                         min-width="120"></el-table-column>
        <el-table-column prop="normStr"
                         label="规格"
                         min-width="120"></el-table-column>
        <el-table-column prop="material"
                         label="材质"
                         min-width="120"></el-table-column>
        <el-table-column prop="madeBy"
                         label="生产厂家"
                         min-width="120"></el-table-column>
        <el-table-column prop="num"
                         label="件数"
                         min-width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button class="ml-80"
                 type="primary"
                 @click="handleSubmit(false)"
                 :loading="$store.getters.loadingBtn">起 运</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { startShip } from '@/api/accept/carry'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchCarNo from '@/components/autocomplete/autoSearchCarNo'

export default {
  name: 'distributeCarForm',
  components: {
    autoSearchDic,
    autoSearchCarNo
  },
  props: ['id'],
  data() {
    return {
      form: this.clearForm(),
      dialogForm: false,
      condition: {}, // 查询条件
      data: [] //table数组
    }
  },
  mounted() {},
  methods: {
    clearForm() {
      return {
        baseVos: [],
        carNo: '',
        carTeam: '',
        planNo: ''
      }
    },

    //起运
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.baseVos.forEach(element => {
            element.detailId = element.id
          })
          startShip(this.form).then(res => {
            console.log(res)
            this.$message({ message: '分配成功!', type: 'success' })
            this.$emit('load')
            this.dialogForm = false
          })
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    }
  },
  watch: {
    dialogForm(val) {
      if (!val) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
